<template>
	<view class="guess-wrap">
	  <view class="caption">
		<text class="text">猜你喜欢</text>
	  </view>
	  <view class="guess">
		<navigator
		  class="navigator"
		  v-for="item in CNXHList"
		  :key="item.id"
		  :url="`/pages/goods/index?id=${item.id}`"
		>
		  <image class="image" mode="aspectFill" :src="item.picture"></image>
		  <view class="name">{{ item.name }}</view>
		  <view class="price">
			<text class="small">¥</text>
			{{ item.price }}
			<text class="small">.00</text>
		  </view>
		</navigator>
	  </view>
	  <!-- 没有更多数据了 -->
	  <view class="loading" v-if="false">正在加载...</view>
	</view>
  </template>
  
  <script setup>
  import { defineProps } from 'vue'
  const props = defineProps({
	CNXHList:Array
   })
  </script>
  
  <style lang="scss">
  /* 分类标题 */
  
  .caption {
	display: flex;
	justify-content: center;
	line-height: 1;
	padding: 36rpx 0 40rpx;
	font-size: 32rpx;
	color: #262626;
	.text {
	  display: block;
	  padding: 0 28rpx 0 30rpx;
	  position: relative;
	  &::before,
	  &::after {
		content: "";
		position: absolute;
		top: 6rpx;
		width: 20rpx;
		height: 20rpx;
		background-image: url(http://static.botue.com/erabbit/static/images/bubble.png);
		background-size: contain;
	  }
	  &::before {
		left: 0;
	  }
	  &::after {
		right: 0;
	  }
	}
  }
  
  /* 猜你喜欢 */
  .guess {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 20rpx;
	.navigator {
	  width: 345rpx;
	  padding: 24rpx 20rpx 20rpx;
	  margin-bottom: 20rpx;
	  border-radius: 10rpx;
	  overflow: hidden;
	  background-color: #fff;
	}
	.image {
	  height: 260rpx;
	}
	.name {
	  height: 75rpx;
	  margin: 10rpx 0;
	  font-size: 26rpx;
	  color: #262626;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	}
	.price {
	  line-height: 1;
	  padding-top: 4rpx;
	  color: #cf4444;
	  font-size: 26rpx;
	}
	.small {
	  font-size: 80%;
	}
  }
  </style>